'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    TextInput,
    TouchableWithoutFeedback,
    ActivityIndicator,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import Toast from '../Utils/toast';
import UserAPIService from '../Commom/UserAPIService';
export default class ForgotPasswordNextPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            smscode: '',
            inputPassword: '',
            inputConfirmPassword: '',
            submitting: false,
        };
        this.closeKeybord = this.closeKeybord.bind(this);
    }

    componentDidMount() {
        let phone = this.props.phone;
        let smscode = this.props.smscode;
        this.setState({
            phone: phone,
            smscode: smscode,
        })
    }

    closeKeybord() {
        TextInput.State.blurTextInput(TextInput.State.currentlyFocusedField());
    }

    ClickAction(number) {
        switch (number) {
            case 0:
                if (this.state.inputPassword.length == 0) {
                    Toast.show('请输入您的密码');
                    return;
                }
                if (this.state.inputConfirmPassword.length == 0) {
                    Toast.show('请再次输入您的密码');
                    return;
                }
                if (this.state.inputPassword.length < 6 || this.state.inputPassword.length > 20) {
                    Toast.show('您的密码格式不正确');
                    return;
                }
                if (this.state.inputPassword != this.state.inputConfirmPassword) {
                    Toast.show('您两次输入的密码不一致');
                    return;
                }
                this.setState({
                    submitting: true,
                });
                UserAPIService.forget(this.state.phone, this.state.inputPassword, this.state.smscode).then((ret)=> {
                    this.setState({
                        submitting: false,
                    });
                    this.BackAction();
                }).catch((err)=> {
                    this.setState({
                        submitting: false,
                    });
                });
                break;
        }
    }

    BackAction() {
        this.props.navigator.pop();
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={()=>this.closeKeybord()}>
                <View style={styles.container}>
                    <View style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                        <View style={{marginTop:24,alignItems:'center'}}>

                            <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                                <TouchableOpacity activeOpacity={0.5}
                                                  onPress={()=>this.BackAction()}>
                                    <Image style={{resizeMode:'contain',width:21,height:21}}
                                           source={require('../../Image/icon_back.png')}></Image>
                                </TouchableOpacity>
                            </View>
                            <Text style={{fontSize:19,color:Global.FontColor.DimGray}}>确认密码</Text>
                        </View>
                    </View>
                    <View
                        style={{flex:1,alignItems:'center',backgroundColor:'white', borderTopWidth:3,borderColor:Global.Const.transparent}}>
                        <Image style={{width:100,height:100,borderRadius:50,marginTop:50}}
                               source={require('../../Image/icon_logo.png')}></Image>

                        <View
                            style={{alignItems:'center',marginTop:30,width:Global.Const.size.width,height:45,backgroundColor:'white',flexDirection:'row'}}>
                            <Image style={{resizeMode:'contain',width:18,height:18,marginLeft:40}}
                                   source={require('../../Image/code_icon.png')}></Image>
                            <TextInput
                                style={{marginLeft:5,flex:1,fontSize:13}}
                                placeholder={'请输入6-20位数的字母或数字'}
                                value={this.state.inputPassword}
                                onChangeText={inputPassword => this.setState({ inputPassword })}
                                secureTextEntry={true}
                                maxLength={20}
                                keyboardType={'numeric'}
                                underlineColorAndroid={'transparent'}></TextInput>
                        </View>
                        <View
                            style={{width:Global.Const.size.width-80,height:1,backgroundColor:Global.Const.transparent,marginLeft:40,marginRight:40}}></View>
                        <View
                            style={{alignItems:'center',width:Global.Const.size.width,height:45,marginTop:20,backgroundColor:'white',flexDirection:'row'}}>
                            <Image style={{resizeMode:'contain',width:18,height:18,marginLeft:40}}
                                   source={require('../../Image/code_icon.png')}></Image>
                            <TextInput
                                style={{marginLeft:5,width:Global.Const.size.width,fontSize:13}}
                                placeholder={'请再次输入密码'}
                                value={this.state.inputConfirmPassword}
                                onChangeText={inputConfirmPassword => this.setState({ inputConfirmPassword })}
                                secureTextEntry={true}
                                maxLength={20}
                                keyboardType={'numeric'}
                                underlineColorAndroid={'transparent'}></TextInput>
                        </View>
                        <View
                            style={{width:Global.Const.size.width-80,height:1,backgroundColor:Global.Const.transparent,marginLeft:40,marginRight:40}}></View>

                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.ClickAction(0)}>
                            <View
                                style={{marginTop:35,backgroundColor:'#24CD78',borderRadius:20, marginLeft:30,marginRight:30,marginBottom:10,width:Global.Const.size.width-60,height:40, alignItems:'center',justifyContent:'center'}}>
                                <Text style={{color:'white',fontSize:18}}>完 成</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    {this.state.submitting ? <View
                        style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                        <View
                            style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                            <ActivityIndicator
                                animating={this.state.animating}
                                style={{ alignItems: 'center',justifyContent: 'center'}}
                                size="large"/>
                            <Text style={{color:'white'}}>正在提交</Text>
                        </View>
                    </View> : null}
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});